<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>照片墙</title>
    <!-- <link type="text/css" href="style.css" rel="stylesheet"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(./img/bg.jpg);
        }
        .container {
            position: relative;
            width: 1200px;
            margin: 100px auto;
        }
        .container > img {
            position: absolute;
            display: block;
            width: 200px;
            box-shadow: 2px 2px 2px #ccc;
            transition: all .5s;
        }
        .pic1 {
            left: 500px;
            top: 500px;
            transform: rotate(-20deg);
        }
        .pic2 {
            left: 300px;
            top: 10px;
            transform: rotate(20deg);
        }
        .pic3 {
            left: 600px;
            top: 300px;
            transform: rotate(-20deg);
        }
        .pic4 {
            left:600px;
            top: 200px;
            transform: rotate(-10deg);
        }
        .pic5 {
            left: 800px;
            top: 10px;
            transform: rotate(0deg);
        }
        .pic6 {
            left: 10px;
            top: 500px;
            transform: rotate(-10deg);
        }
        .pic7 {
            left: 0px;
            top: 0px;
            transform: rotate(-20deg);
        }
        .pic8 {
            left: 200px;
            top: 500px;
            transform: rotate(-40deg);
        }
        .pic9 {
            left: 800px;
            top: 600px;
            transform: rotate(-20deg);
        }
        .container > img:hover {
            transform: rotate(0deg) scale(1.3);
            box-shadow: 10px 10px 20px #ccc;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="pic pic1" src="img/1.jpg">
        <img class="pic pic2" src="img/2.jpg">
        <img class="pic pic3" src="img/3.jpg">
        <img class="pic pic4" src="img/4.jpg">
        <img class="pic pic5" src="img/1.jpg">
        <img class="pic pic6" src="img/6.jpg">
        <img class="pic pic7" src="img/9.jpg">
        <img class="pic pic8" src="img/8.jpg">
        <img class="pic pic9" src="img/9.jpg">
    </div>
</body>

</html>